<template>
	<view class="">
		<view class="menubox lt0" :class="cn">
			<view class="f32 fwb" style="margin-bottom: 20rpx;">
				{{$t("menu.tit1")}}
			</view>
			<!--头部四个按钮-->
			<view class="">
				<view class="bj_between">
					<view class="menubox-topbtn bj_left" @click="opp(0)">
						<image src="/static/lm/1.png" mode="widthFix"></image>
						<text>{{$t("menu.tb1")}}</text>
					</view>
					<view class="menubox-topbtn bj_left" @click="opp(1)">
						<image src="/static/lm/2.png" mode="widthFix"></image>
						<text>{{$t("menu.tb2")}}</text>
					</view>
				</view>
				<view class="bj_between">
					<view class="menubox-topbtn bj_left" @click="opp(2)">
						<image src="/static/lm/3.png" mode="widthFix"></image>
						<text>{{$t("menu.tb3")}}</text>
					</view>
					<view class="menubox-topbtn bj_left" @click="opp(3)">
						<image src="/static/lm/4.png" mode="widthFix"></image>
						<text>{{$t("menu.tb4")}}</text>
					</view>
				</view>
			</view>

			<view class="f32 fwb" style="margin-bottom: 20rpx;">
				{{$t("menu.tit2")}}
			</view>
			<!-- 中间四个按钮 -->
			<view>
				<view class="menubox-mbbtn bj_between" @click="opp(5)">
					<view class="bj_left">
						<image src="/static/lm/5.png" class="menubox-mbbtn-pic" mode="widthFix"></image>
						<text>{{$t("menu.mb1")}}</text>
					</view>
					<view class="menubox-mbbtn-gobtn bj_center">
						<text>{{$t("menu.mbgo")}}</text>
						<image src="/static/lm/next.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="menubox-mbbtn bj_between" @click="opmgc">
					<view class="bj_left">
						<image src="/static/lm/6.png" class="menubox-mbbtn-pic" mode="widthFix"></image>
						<text>{{$t("menu.mb2")}}</text>
					</view>
					<view class="menubox-mbbtn-gobtn bj_center">
						<text>{{$t("menu.mbgo")}}</text>
						<image src="/static/lm/next.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="menubox-mbbtn bj_between" @click="opp(6)">
					<view class="bj_left">
						<image src="/static/lm/7.png" class="menubox-mbbtn-pic" mode="widthFix"></image>
						<text>{{$t("menu.mb3")}}</text>
					</view>
					<view class="menubox-mbbtn-gobtn bj_center">
						<text>{{$t("menu.mbgo")}}</text>
						<image src="/static/lm/next.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="menubox-mbbtn bj_between" @click="opp(4)">
					<view class="bj_left">
						<image src="/static/lm/8.png" class="menubox-mbbtn-pic" mode="widthFix"></image>
						<text>{{$t("menu.mb4")}}</text>
					</view>
					<view class="menubox-mbbtn-gobtn bj_center">
						<text>{{$t("menu.mbgo")}}</text>
						<image src="/static/lm/next.png" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<!--奖池-->
			<view class="menubox-jjbox" @click="topage2">
				<text>{{$t("menu.$")}}</text>
				<text>{{getNum()}}</text>
			</view>

			<!--下方按钮-->
			<view class="menubox-tybtn bj_left" @click="tokf">
				<image src="/static/lm/10.png" mode="widthFix"></image>
				<text>{{$t("menu.bb1")}}</text>
			</view>
			<view class="menubox-tybtn bj_left" @click="opp(7)">
				<image src="/static/lm/11.png" mode="widthFix"></image>
				<text>{{$t("menu.bb2")}}</text>
			</view>

		</view>


		<view class="menugcbox bj_center" v-if="showg">
			<mtVue></mtVue>
		</view>

	</view>

</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import mtVue from './mt.vue';


	// 注册父级可调用的方法
	defineExpose({
		opmu,
		clmu
	})
	let cn = ref("")
	const opgc = inject("opgc");
	const ophd = inject("ophd");
	const clgc = inject("clgc");
	provide("clmgc", clmgc);
	provide("opp", opp);
	let showg = ref(false)
	onShow(function() {
		showg.value = false
	})
	
	function tokf() {
		window.open(getApp().globalData.config2.kfurl)
	}

	function getNum() {
		return getApp().globalData.config2.jackpot_prize
	}

	// 打开菜单
	function opmu() {
		showg.value = false
		cn.value = "menu_open"
	}

	// 0打开vip界面1优惠劵分享2老虎机3签到4签到宝箱
	function opp(v) {
		if (getApp().globalData.userInfo == null) {
			opgc(1, 2)
			return
		}
		clmu()
		clgc();
		clmgc()
		if (v == 0) {
			ophd(5)
		} else if (v == 1) {
			ophd(4)
		} else if (v == 2) {
			ophd(1)
		} else if (v == 3) {
			ophd(0)
		} else if (v == 4) {
			ophd(3)
		} else if (v == 5) {
			ophd(8)
		} else if (v == 6) {
			ophd(9)
		} else if (v == 7) {
			ophd(12)
		}
	}

	function topage2() {
		if (getApp().globalData.userInfo == null) {
			opgc(1, 2)
			return
		}
		uni.switchTab({
			url: "/pages/index/page2"
		})
	}

	// 关闭菜单盖层
	function clmgc() {
		showg.value = false
	}

	function opmgc() {
		if (getApp().globalData.userInfo == null) {
			opgc(1, 2)
			return
		}
		showg.value = true
	}

	// 关闭菜单
	function clmu() {
		if (cn.value != "") {
			cn.value = "menu_cl"
			setTimeout(function() {
				cn.value = ""
			}, 300)
		}

	}
</script>

<style lang="scss">
	/* PC端适配 */
	@media (min-width: 768px) {
		.menubox {
			position: absolute !important;
			height: 100vh !important;
		}

		.menugcbox {
			left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
			/* 与主容器同宽 */
		}
	}

	.menugcbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		/* 100% 相对于 #app 的宽度 */
		height: 100vh;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: rgba(0, 0, 0, 0.5);
		z-index: 1001;

	}

	.menubox {
		width: 520rpx;
		overflow-y: auto;
		height: 100%;
		position: fixed;
		padding: 122rpx 16rpx 20rpx;
		background: #003311;
		z-index: 1000;
		transform: translateX(-100%);

		&-topbtn {
			width: 236rpx;
			height: 116rpx;
			background: #00561D;
			border-radius: 12rpx;
			margin-bottom: 16rpx;
			padding: 0 20rpx;

			image {
				width: 68rpx;
				margin-right: 20rpx;
			}
		}

		&-mbbtn {
			height: 108rpx;
			background: #00561D;
			border-radius: 12rpx;
			padding: 0 24rpx;
			margin-bottom: 20rpx;
			font-size: 28rpx;

			&-pic {
				width: 84rpx;
				margin-right: 20rpx;
			}

			&-gobtn {
				width: 92rpx;
				height: 40rpx;
				background: url("/static/lm/99.png") no-repeat center center;
				background-size: 100% 100%;
				font-weight: bold;
				font-size: 28rpx;

				image {
					width: 20rpx;
				}
			}
		}

		&-jjbox {
			width: 100%;
			height: 194.02rpx;
			background: url("/static/lm/9.png") no-repeat center center;
			background-size: 100% 100%;
			padding-top: 106rpx;
			font-size: 36rpx;
			color: #9A2F01;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
		}

		&-tybtn {
			height: 88rpx;
			background: #00561D;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			padding-left: 36rpx;
			font-size: 30rpx;
			font-weight: bold;

			image {
				width: 48rpx;
				margin-right: 30rpx;
			}
		}

	}

	.menu_open {
		-webkit-animation: menu_opend 0.3s 1 linear;
		animation: menu_opend 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes menu_opend {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0%);
		}
	}

	.menu_cl {
		-webkit-animation: menu_cld 0.3s 1 linear;
		animation: menu_cld 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes menu_cld {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(-100%);
		}
	}
</style>